/* 
	用户中心_用户管理_我的信息模块
	create by xyr on 2017/09/18
 */

<template>
	<div class="app-container">
		<div class="wrapper news">
			<el-col :span="24" class="warp-main">
				<!-- 登陆用户基本信息.start -->
				<div class="el-bar">
					<p>
						<i class="iconfont icon-users"></i>基本信息</p>
					<div style="margin-top:10px;font-size: 14px;color: #666;">
						<span class="base">
							<span>名称 </span> :
							<span>{{loginName}}</span>
						</span>
						<span class="base">
							<span>角色 </span> :
							<span>{{roleName}}</span>
						</span>
						<span class="base">
							<span>手机/邮箱 </span>:
							<span>{{phoneAndEmail}}</span>
						</span>
						<!-- <el-button class="base" type="text" @click="open3"> 修改密码 :
								<span class="el-alert">点击修改密码</span>
							</el-button> -->

                        <!-- 修改手机号码.start -->
                        <el-button size="mini" type="primary" plain icon="el-icon-phone" @click="openEditPhoneDailog">
							修改手机
						</el-button>

                        <el-dialog title="修改手机号码" :visible.sync="editPhoneDialogFormVisible">
							<el-form status-icon :model="editPhoneForm" ref="editPhoneForm" :rules="editPhoneRules">
								<el-form-item label="当前号码" :label-width="formLabelWidth" prop="currentPhone">
									<el-input type="text" v-model="currentPhone" :disabled="true" auto-complete="off"></el-input>
								</el-form-item>

								<el-form-item label="新的号码" :label-width="formLabelWidth" prop="phone">
									<el-input  :maxlength="11" type="text" v-model="editPhoneForm.phone" auto-complete="off"></el-input>
								</el-form-item>

								<div class="form-btn" style="text-align:right">
									<el-button class="iconfont icon-fanhui" @click="editPhoneDialogFormVisible = false">取 消</el-button>
									<el-button class="iconfont icon-fuxuan" type="primary" @click="editPhone" >确 定</el-button>
								</div>
							</el-form>
							
						</el-dialog>
                        <!-- 修改手机号码.end -->
                        
                        <!-- 修改邮箱.start -->
                        <el-button size="mini" type="info" plain icon="el-icon-message" @click="openEditEmailDailog">
							修改邮箱
						</el-button>
                        <el-dialog title="修改邮箱" :visible.sync="editEmailDialogFormVisible">
							<el-form status-icon :model="editEmailForm" ref="editEmailForm" :rules="editEmailRules">
								<el-form-item label="当前邮箱" :label-width="formLabelWidth" prop="currentEmail">
									<el-input type="text" v-model="currentEmail" :disabled="true" ></el-input>
								</el-form-item>

								<el-form-item label="新的邮箱" :label-width="formLabelWidth" prop="email">
									<el-input  type="text" v-model="editEmailForm.email" ></el-input>
								</el-form-item>

								<div class="form-btn" style="text-align:right">
									<el-button class="iconfont icon-fanhui" @click="editEmailDialogFormVisible = false">取 消</el-button>
									<el-button class="iconfont icon-fuxuan" type="primary" @click="editEmail" >确 定</el-button>
								</div>
							</el-form>
							
						</el-dialog>
                        <!-- 修改邮箱.end -->
                        
						<!-- 密码修改.start -->
						<!-- <el-button type="text" @click="dialogFormVisible = true">
							<span class="iconfont icon-xiugaimima el-alert">修改密码</span>
						</el-button> -->

                        <el-button size="mini" type="warning" plain class="iconfont icon-xiugaimima" @click="dialogFormVisible = true">
							修改密码
						</el-button>

						<el-dialog title="修改密码" :visible.sync="dialogFormVisible">
							<el-form status-icon :model="passForm" ref="passForm" :rules="passRules">
								<el-form-item label="新密码" :label-width="formLabelWidth" prop="pass1">
									<el-input type="password" v-model="passForm.pass1" auto-complete="off"></el-input>
								</el-form-item>

								<el-form-item label="再次确认" :label-width="formLabelWidth" prop="pass2">
									<el-input type="password" v-model="passForm.pass2" auto-complete="off"></el-input>
								</el-form-item>

								<div class="form-btn" style="text-align:right">
									<el-button class="iconfont icon-fanhui" @click="closeDialog">取 消</el-button>
									<el-button class="iconfont icon-fuxuan" type="primary" @click="updatePassword">确 定</el-button>
								</div>
							</el-form>
							
						</el-dialog>
						<!-- 密码修改.end -->

					</div>
				</div>
				<!-- 登陆用户基本信息.end -->
			</el-col>

            <el-col :span="12" class="warp-main">
				<div class="el-bar">
					<p>
						<i class="iconfont icon-users"></i>团队信息</p>
					<el-table v-loading="loadingTeamDataTable" :data="teamData" border style="width: 100%;text-align: center;">
						<el-table-column prop="team" label="团队名称">
						</el-table-column>
						<el-table-column prop="namespace_num" label="空间数">
						</el-table-column>
						<el-table-column prop="user_num" label="成员数">
						</el-table-column>
					</el-table>
				</div>
			</el-col>

			<el-col :span="12" class="warp-main">
				<div class="el-bar">
					<p>
						<i class="iconfont icon-users"></i>空间信息</p>
					<el-table v-loading="loadingNamespaceDataTable" :data="spaceData" border style="width: 100%">
						<el-table-column prop="namespace_cn" label="名称">
						</el-table-column>
						<el-table-column prop="team" label="所属团队">
						</el-table-column>
						<el-table-column prop="appCount" label="应用">
						</el-table-column>
						<el-table-column prop="podCount" label="容器">
						</el-table-column>
					</el-table>
				</div>
			</el-col>
			
		</div>
	</div>
</template>
<script>
import { validateEmail, validatePhone,validateNumber} from '@/utils/validate';
export default {
	data() {

		const validatePass1 = (rule, value, callback) => {
            if (value.length < 6) {
				callback(new Error('密码长度不能少于6'));
			} else {
				callback();
			}
		};
		
		const validatePass2 = (rule, value, callback) => {
            if (value.length < 6) {
				callback(new Error('密码长度不能少于6'));
			} else if (this.passForm.pass1 != value){
				callback(new Error('和第一次密码不相等'));
			} else {
				callback();
			}
        };

        // 检验手机号码
        const _validatePhone = (rule, value, callback) => {
			if (!validatePhone(value)) {
				callback(new Error('请输入正确手机号码'));
			} else {
				callback();
			}
        };
        
        // 校验邮箱
        const _validateEmail = (rule, value, callback) => {
			if (!validateEmail(value)) {
				callback(new Error('请输入正确的邮箱'));
			} else {
				callback();
			}
		};



		return {
			loginName: this.userBaseInfo.getLoginName(),
			roleName: this.userBaseInfo.getRoleName(),
            phoneAndEmail: this.userBaseInfo.getPhone() + '/' + this.userBaseInfo.getEmail(),
            // 用户空间信息
            spaceData: [],
            // 用户团队信息
			teamData: [],
			dialogFormVisible: false,
			passForm: {
				pass1: '',
				pass2: ''
			},
			formLabelWidth: '80px',
			passRules: {
				pass1: [
					{ required: true, trigger: 'blur', validator: validatePass1 }
				],
				pass2: [
					{ required: true, trigger: 'blur', validator: validatePass2 }
				]
            },
            loadingNamespaceDataTable: false,
            loadingTeamDataTable: false,
            ////////////////////////////////////////修改手机号码////////////////////////
            currentPhone: this.userBaseInfo.getPhone(),
            editPhoneDialogFormVisible: false,
            editPhoneForm: {
                id: '',
                phone: ''
            },
            editPhoneRules:{
                phone : [
                    { required: true, trigger: 'blur', validator: _validatePhone }
                ]
            },
            ////////////////////////////////////////修改邮箱//////////////////////////////
            editEmailForm: {
                id: '',
                email: '',
            },
            editEmailRules: {
                email: [
                    { required: true, trigger: 'blur', validator: _validateEmail }
                ]
            },
            editEmailDialogFormVisible: false,
            currentEmail: this.userBaseInfo.getEmail(),

		}
    },
    created() {
        // 获取用户的空间信息
        this.getUserNamespaceBase();
        // 获取用户的团队信息
        this.getUserTeamBase();
    },
	methods: {
		/* open3() {
			this.$prompt('请输入新密码', '修改密码', '请输入新密码', '修改密码', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
				inputErrorMessage: '格式不正确'
			}).then(({ value }) => {
				this.$message({
					type: 'success',
					message: '你的密码是: ' + value
				});
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '取消修改密码'
				});
			});
		} */
		updatePassword() {
			// 修改当前登陆用户的密码
			// 表单校验
			this.$refs.passForm.validate(valid => {
				if (valid) {
					// 在sessionStore中 得到全局的用户信息
					let userId = this.userBaseInfo.getUserId();
					if (userId.length > 0 && typeof userId != 'undefined' ) {
                        // 操作审计
                        this.userBaseInfo.setOperObjectName(this.userBaseInfo.getLoginName());
						// 修改密码
						let param = {
							id: userId,
							loginPassword: this.passForm.pass2
						};
						this.httpClient.httpClientPatch(this.projectConfig.URL_API_USER_UPDATE_PASSWORD,param).then(res =>{
							let _type = 'error';
							let _message = res.meta.message;
							if ( res.meta.code == this.projectConfig.CODE_OK) {
								_type = 'success';
							}
							
							// 关闭对话框
							this.closeDialog();
							// 弹框提示
							this.$message({
								type: _type,
								message: _message,
								showClose: true,
								duration: 5 * 1000
							});
							
						})
					}
				} else {
					return false;
				}
			});	
			
		},
		// 关闭对话框
		closeDialog() {
			// 清空表单
			this.$refs.passForm.resetFields();
			// 关闭对话框
			this.dialogFormVisible = false;
        },
        // 根据用户id,是否超级管理员获取用户的空间信息
        getUserNamespaceBase() {
            let getNamespaceBaseUrl = this.projectConfig.URL_API_USER_GET_NAMESPACE_BASE;
            let param = {
                userId: this.userBaseInfo.getUserId(),
                superAdmin: this.userBaseInfo.getIsSuperAdmin()
            }
            // 获取数据
            this.loadingNamespaceDataTable = true;
            this.httpClient.httpClientget(getNamespaceBaseUrl,param).then(res => {
                this.loadingNamespaceDataTable = false;
                this.spaceData = res.data;
            }).catch(error => {
                this.loadingNamespaceDataTable = false;
            });
        },
        // 根据用户ID,是否超级用户获取团队信息
        getUserTeamBase() {
            let getTeamBaseUrl = this.projectConfig.URL_API_USER_GET_TEAM_BASE;
            let param = {
                userId: this.userBaseInfo.getUserId(),
                superAdmin: this.userBaseInfo.getIsSuperAdmin()
            };
            // 获取数据
            this.loadingTeamDataTable = true;
            this.httpClient.httpClientget(getTeamBaseUrl,param).then(res => {
                this.loadingTeamDataTable = false;
                this.teamData = res.data;
            }).catch(error => {
                this.loadingTeamDataTable = false;
            });
        },
        /////////////////////////////////////////////////////////////
        openEditPhoneDailog() {
            this.editPhoneDialogFormVisible = true;
            this.currentPhone = this.userBaseInfo.getPhone();
            this.editPhoneForm.phone = '';
        },
        // 修改手机号
        editPhone() {
            this.$refs.editPhoneForm.validate(valid => {
                if (valid) {
                    // 修改
                    this.editPhoneForm.id = this.userBaseInfo.getUserId();
                    if (this.editPhoneForm.phone == this.currentPhone) {
                        this.$notify.warning(
                            '新的手机号和原来的一样,不需要修改!'
                        );
                    } else {
                        // 操作审计
                        this.userBaseInfo.setOperObjectName(this.userBaseInfo.getLoginName());
                        this.httpClient.httpClientPatch(this.projectConfig.URL_API_USER_EDIT_PHONE,this.editPhoneForm).then(res => {
                            // 关闭对话框
                            this.editPhoneDialogFormVisible = false;

                            if (res.meta.code == this.projectConfig.CODE_OK) {
                                // 重新设置缓存中值
                                this.userBaseInfo.setPhone(this.editPhoneForm.phone);
                                // 刷新
                                this.phoneAndEmail = this.userBaseInfo.getPhone() + '/' + this.userBaseInfo.getEmail();
                            }

                            
                            
                        })
                    }
                    
                }
            })
        },
        // 打开修改邮箱的对话框
        openEditEmailDailog() {
            this.editEmailDialogFormVisible = true;
            this.currentEmail = this.userBaseInfo.getEmail();
            this.editEmailForm.email = '';
        },
        // 修改邮箱
        editEmail() {
            this.$refs.editEmailForm.validate(valid => {
                if (valid) {
                    this.editEmailForm.id = this.userBaseInfo.getUserId();
                    if (this.editEmailForm.email == this.currentEmail) {
                        this.$notify.warning(
                            '新的邮箱和原来的一样,不需要修改!'
                        );
                    } else {
                        // 操作审计
                        this.userBaseInfo.setOperObjectName(this.userBaseInfo.getLoginName());
                        this.httpClient.httpClientPatch(this.projectConfig.URL_API_USER_EDIT_EMAIL,this.editEmailForm).then(res => {
                            // 关闭对话框
                            this.editEmailDialogFormVisible = false;

                            if (res.meta.code == this.projectConfig.CODE_OK) {
                                // 重新设置缓存中值
                                this.userBaseInfo.setEmail(this.editEmailForm.email);
                                // 刷新
                                this.phoneAndEmail = this.userBaseInfo.getPhone() + '/' + this.userBaseInfo.getEmail();
                            }
                            
                            
                        })
                    }

                }
            })
        }
	}
}
</script>
<style>
.news .el-alert {
	border: 1px solid #ccc;
	display: inherit;
	color: #333;
	height: 30px;
	line-height: 30px;
}

.news .el-alert:hover {
	background: #f8f8f8;
}

.news .base {
	margin-left: 30px;
}

.news .warp-main {
	margin-bottom: 20px;
}

.news .el-table {
	margin: 10px auto;
	text-align: center;
}
</style>
